<template>
  <div class="pager">
    <Page 
      :total="totalItem" 
      :current="currentPage"
      :page-size="pageSize"
      @on-change="onPageChange"
      @on-page-size-change="onPageSizeChange"
      show-sizer 
      placement="top">
    </Page>
  </div>
</template>
<script>
export default {
  props: {
    totalItem: '',
    currentPage: 1
  },
  data() {
    return {
      pageSize: window.$pageSize
    }
  },
  methods: {
    onPageChange (val) {
      this.$emit('complete', {type: 'current', val: val})
    },
    onPageSizeChange (val) {
      this.$emit('complete', {type: 'size', val: val})
    }
  }
}
</script>